<template>
	<view class="beginner-tutorial-container">
		<view class="beginner-tutorial-header">
			<view class="header-title">新手使用教程</view>
			<view class="header-slogan">来天下惠，享霸王餐</view>
		</view>

		<view class="beginner-tutorial-main">
			<view class="tutorial-main-box">
				<view class="u-flex u-flex-center tutorial-main-title">
					<view class="main-title-left">步骤一</view>选择店铺活动 点击"去抢单"
				</view>

				<view class="tutorial-main-cont">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-1.png')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							1.找一家心仪的店铺去抢单！
						</view>

					</view>
				</view>
				
				<view class="tutorial-main-cont m-b-20">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-2.png')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							2.点击立即抢单确定报名成功
						</view>
					</view>
				</view>
				
				<view class="u-flex u-flex-center tutorial-main-title u-m-t-50">
					<view class="main-title-left">步骤二</view>报名成功后下单，填写单号
				</view>
				
				<view class="tutorial-main-cont">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-3.png')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							3.点击一键进店下单 点单完成后返回天下惠小程序
						</view>
				
					</view>
				</view>
				
				<view class="tutorial-main-cont">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-4.png')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							4.填写订单号锁定名额
						</view>
				
					</view>
				</view>
				
				<view class="u-flex u-flex-center tutorial-main-title u-m-t-50">
					<view class="main-title-left">步骤三</view>报名成功后下单，填写单号
				</view>
				
				<view class="tutorial-main-cont">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-5.png')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							5.根究指引按需求上传对应截图
						</view>
				
					</view>
				</view>
				
				
				<view class="u-flex u-flex-center tutorial-main-title u-m-t-50">
					<view class="main-title-left">步骤四</view>等待审核
				</view>
				
				<view class="tutorial-main-cont">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-6.jpg')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							6.等待平台审核
						</view>
				
					</view>
				</view>
				
				<view class="u-flex u-flex-center tutorial-main-title u-m-t-50">
					<view class="main-title-left">步骤五</view>提现
				</view>
				
				<view class="tutorial-main-cont">
					<image class="tutorial-main-img" mode="widthFix"
						:src="getimageUrl('tutorial-7.jpg')"></image>
					<view class="u-flex u-flex-end tutorial-main-text">
						<view class="text-value">
							7.余额中提现（秒到账）
						</view>
				
					</view>
				</view>
				
				
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getimageUrl } from '@/util/util.js';
</script>

<style lang="scss" scoped>
	.beginner-tutorial-container {
		.beginner-tutorial-header {
			background: linear-gradient(180deg, #FF2A47 0%, #FE7E17 100%);
			padding: 30rpx 20rpx 80rpx 20rpx;

			.header-title {
				font-size: 62rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
			}

			.header-slogan {
				font-size: 36rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
				padding-top: 25rpx;
			}
		}

		.beginner-tutorial-main {
			margin: 0 10rpx;
			border-radius: 12rpx;
			padding: 10rpx;
			background: linear-gradient(180deg, #FF2A47 0%, #FE7E17 100%);
			position: relative;
			top: -50rpx;

			.tutorial-main-box {
				// margin: 10rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 25rpx;

				.tutorial-main-title {
					background: #FE6B22;
					font-size: 36rpx;
					font-weight: 700;
					color: #FFFFFF;
					padding: 20rpx;
					text-align: center;
					// margin-top: 20rpx;
					.main-title-left {
						padding-right: 30rpx;
					}
				}

				.tutorial-main-cont {
					position: relative;
					margin-top: 80rpx;

					.tutorial-main-img {
						width: 50%;
						top: -50rpx;
						position: absolute;

					}

					.tutorial-main-text {
						width: 100%;
						background: #FFF7EC;
						padding: 10rpx 0rpx 198rpx 0rpx;

						.text-value {
							width: 44%;
							font-size: 36rpx;
							font-weight: 500;
							color: #FE6B22;
							padding-right: 20rpx;
						}
					}
				}
			}
		}
	}
</style>